<script lang="ts" setup>
import { ref, h, onBeforeMount, nextTick, reactive, computed } from "vue";
import { VxeFormPropTypes, VxeModalInstance, VxeFormProps } from "vxe-pc-ui";
import {
  exceptionEdit,
  typeWarnExceptionList,
  exceptionAdd
} from "@/api/warning/warning";
const emits = defineEmits<{ (e: "reload"): void }>();
const vxeModalRef = ref<VxeModalInstance>();
import { ElMessage } from "element-plus";

const modalOptions = reactive<{
  modalValue: boolean;
  modalTitle: string;
  canSubmit: boolean;
}>({
  modalValue: false,
  modalTitle: "",
  canSubmit: true
});

const showModal = (title: string, canSubmit?: boolean): void => {
  modalOptions.modalTitle = title;
  modalOptions.modalValue = true;
  modalOptions.canSubmit = canSubmit ?? true;
};
const showAddModal = (id: number) => {
  showModal(`新增异常`);
  nextTick(() => {
    formRef.value.clearValidate();
    // emits("reload");
  });
};
const showEditModal = (record: Recordable) => {
  showModal(`修改异常`);
  nextTick(() => {
    formRef.value.clearValidate();
    for (let key in formOptions.data) {
      if (record[key] === undefined || record[key] === null) {
      } else {
        formOptions.data[key] = record[key];
      }
    }
    console.log(record)
    if (record.triggerRuleKey == 0) {
      let list = record.triggerRuleValue.split(',');
      console.log(list)
      if (list.length == 5) {
        formOptions.data.data2 = list[0];
        formOptions.data.data3 = list[1];
        formOptions.data.data4 = list[2];
        formOptions.data.data5 = list[3];
        formOptions.data.data6 = list[4];
      }
    } else if(record.triggerRuleKey == 1) {
      formOptions.data.data1 = record.triggerRuleValue
    }
    console.log(formOptions.data)
  });
};
onBeforeMount(() => {
  
  getException();
});
// 异常类型
const ExceptionList = ref<any[]>();
const getException = () => {
  typeWarnExceptionList().then((res: any) => {
    ExceptionList.value = res?.data;
  });
};
// 处理方式列表
const wayOptions = ref<any[]>([
  {
    label: "仅触发警告",
    value: 0
  }
]);

const formRef = ref();
interface FormDataVO {
  triggerRuleKey: string | number; //风险类型
  handleMode: string | number; //处理方式
  remark: string; //备注
  triggerRuleValue: string | number; //触发规则
  id: number | string;
  data1: string;
  data2: string;
  data3: string;
  data4: string;
  data5: string;
  data6: string;
  type: string | number;
  exceptionRangeScope: string | number;
  exceptionRange: string | number;
}
const formOptions = reactive<VxeFormProps<FormDataVO>>({
  data: {
    triggerRuleKey: 0,
    type: 0,
    handleMode: 0,
    remark: "",
    triggerRuleValue: "",
    id: "",
    data1: '',
    data2: '',
    data3: '',
    data4: '',
    data5: '',
    data6: '',
    exceptionRangeScope: '',
    exceptionRange: 0
  },
  items: [
    {
      field: "triggerRuleKey",
      title: "风险类型",
      span: 24,
      itemRender: {},
      slots: { default: "triggerRuleKey" }
    },
    {
      field: "triggerRuleValue",
      title: "触发规则",
      span: 24,
      itemRender: {},
      slots: { default: "triggerRuleValue" }
    },
    {
      field: "handleMode",
      title: "处理方式",
      span: 24,
      itemRender: {},
      slots: { default: "handleMode" }
    },
    {
      field: "remark",
      title: "备注",
      span: 24,
      itemRender: {},
      slots: { default: "remark" }
    }
  ]
});

const formRules = ref<VxeFormPropTypes.Rules>({
  triggerRuleKey: [{ required: true, message: "请选择风险类型", trigger: "change" }],
  handleFrequency: [
    { required: true, message: "请选择风处理频率", trigger: "change" }
  ],
  handleMode: [{ required: true, message: "请选择处理方式", trigger: "change" }],
  triggerRuleValue: [
    { required: true, message: "请选择触发规则", trigger: "change" }
  ]
});
const handleSubmit = async () => {
  const validate = await formRef.value.validate();
  if (!validate) {
    if (formOptions.data.triggerRuleKey == 0) {
      if (!formOptions.data.data2 || !formOptions.data.data3 || !formOptions.data.data4 || !formOptions.data.data5 || !formOptions.data.data6) { 
        ElMessage.error('请完善信息！');
        return false;
      }
    } else if(formOptions.data.triggerRuleKey == 1) {
      if (!formOptions.data.data1) { 
        ElMessage.error('请完善信息！');
        return false;
      }
    }
    formOptions.data.type = formOptions.data.triggerRuleKey;
    if (formOptions.data.id) {
      exceptionEdit(formOptions.data).then(res => {
        formRef.value.clearValidate();
        modalOptions.modalValue = false;
        emits("reload");
      });
    } else {
      exceptionAdd(formOptions.data).then(res => {
        formRef.value.clearValidate();
        modalOptions.modalValue = false;
        emits("reload");
      });
    }
  }
};
defineExpose({ showAddModal, showEditModal });

const inputblur = () => {
  if (formOptions.data.triggerRuleKey == 0) {
    formOptions.data.triggerRuleValue = `${formOptions.data.data2},${formOptions.data.data3},${formOptions.data.data4},${formOptions.data.data5},${formOptions.data.data6}`;
  } else if(formOptions.data.triggerRuleKey == 1) {
    formOptions.data.triggerRuleValue = `${formOptions.data.data1}`
  }
}
</script>
<template>
  <vxe-modal
    ref="vxeModalRef"
    v-model="modalOptions.modalValue"
    width="600"
    showFooter
    :title="modalOptions.modalTitle"
  >
    <template #default>
      <vxe-form
        ref="formRef"
        :titleWidth="120"
        :titleAlign="`right`"
        :rules="formRules"
        v-bind="formOptions"
      >
        <template #triggerRuleKey="{ data }">
          <el-select
            clearable
            placeholder="请选择异常类型"
            v-model="data.triggerRuleKey"
          >
            <el-option
              v-for="(item, index) in ExceptionList"
              :key="index"
              :label="item.desc"
              :value="item.code"
            ></el-option>
          </el-select>
        </template>
        <template #triggerRuleValue="{ data }">
          <div
            v-if="data.triggerRuleKey == 1"
            class="flex justify-start items-center"
          >
            <div>当商户达到预估下发额度</div>
            <div class="mx-3">
                <el-input
                v-model="data.data1"
                placeholder="20000"
                style="width: 100px;"
                @blur="inputblur"
                ></el-input>
              </div>
            <div>%时，触发警告</div>
          </div>
          
          <div v-if="data.triggerRuleKey == 0">
            <div class="flex justify-start items-center mb-3">
              <div>每</div>
              <div class="mx-3">
                <el-input
                v-model="data.data2"
                placeholder="20000"
                style="width: 100px;"
                @blur="inputblur"
                ></el-input>
              </div>
              <div>分钟，充值限制</div>
              <div class="mx-3">
                <el-input
                v-model="data.data3"
                placeholder="20000"
                style="width: 100px;"
                @blur="inputblur"
                ></el-input>
              </div>
              <div>次</div>
            </div>

            <div class="flex justify-start items-center mb-3">
              <div>每</div>
              <div class="mx-3">
                <el-input
                v-model="data.data4"
                placeholder="20000"
                style="width: 100px;"
                @blur="inputblur"
                ></el-input>
              </div>
              <div>小时，充值限制</div>
              <div class="mx-3">
                <el-input
                v-model="data.data5"
                placeholder="20000"
                style="width: 100px;"
                @blur="inputblur"
                ></el-input>
              </div>
              <div>次</div>
            </div>
            
            <div class="flex justify-start items-center mb-3">
              <div>每天充值限制</div>
              <div class="mx-3">
                <el-input
                prop="singleAmount"
                v-model="data.data6"
                placeholder="20000"
                style="width: 100px;"
                @blur="inputblur"
                ></el-input>
              </div>
              <div>次</div>
            </div>
          </div>

        </template>
        <template #handleMode="{ data }">
          <el-radio-group v-model="data.handleMode">
            <el-radio
              v-for="(item, index) in wayOptions"
              :key="index"
              :value="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </template>
        <template #remark="{ data }">
          <el-input
            v-model="data.remark"
            type="textarea"
            placeholder="请输入备注"
          />
        </template>
      </vxe-form>
    </template>
    <template #footer>
      <vxe-button content="关闭" @click="modalOptions.modalValue = false" />
      <vxe-button
        v-if="modalOptions.canSubmit"
        status="primary"
        content="确定"
        @click="handleSubmit"
      />
    </template>
  </vxe-modal>
</template>
